<template>
  <div class="app-container calendar-list-container">
    <div class="data-list" style="margin: 0">
      <el-row class="list-content">
        <el-col><span>{{$t('businessManager.worksMessage')}}</span></el-col>
      </el-row>
      <div style="padding: 20px">
        <el-row>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.projectNo')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.projectNo }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.projectName')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.projectName }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Account：</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.bu }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.customerName')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.customerName }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.projectYear')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.projectYear }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.epcType')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.epcType }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.projectEngineer')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.projectEngineer }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.projectStatus')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.projectStatus }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.currencyType')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.currencyType }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.poApprovalMoney')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.poApprovalMoney }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.finishMoney')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.finishMoney }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">{{$t('businessManager.requestFundsMoney')}}</div>
            <div class="labelName" style="padding-left: 10px">{{ Info.requestFundsMoney }}</div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('businessManager.offerOder')}}{{ offerOder }}</span></el-col>
      </el-row>
      <div class="list-operation">
        <el-button class="yt-btn-ys" type="primary" @click="handleDownload(2, true)">{{$t('businessManager.handleDownload')}}</el-button>
        <el-button class="yt-btn" type="danger" style="margin-left:10px" @click="handleAdd">{{$t('businessManager.handleAdd')}}</el-button>
      </div>
      <el-table :data="list" style="width: 100%;" class="yt-table" :empty-text="$t('placeholder.emptyText')" v-loading.body="listLoading" :key="tableKey">
        <el-table-column align="center" :label="$t('businessManager.createTime')" prop="createTime" class-name="pd"/>
        <el-table-column align="center" :label="$t('businessManager.createName')" prop="createName" class-name="pd"/>
        <el-table-column align="center" :label="$t('businessManager.fileName')">
          <template slot-scope="scope">
            <div v-if="scope.row.fileType === 0" style="text-decoration: underline;color: #0000ff;cursor: pointer;" type="primary" @click="handleDownload(scope.row.id)">{{ scope.row.fileName }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('businessManager.fileName1')">
          <template slot-scope="scope">
            <div v-if="scope.row.fileType !== 0" style="text-decoration: underline;color: #0000ff;cursor: pointer;" type="primary" @click="handleDownload(scope.row.id)">{{ scope.row.fileName }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="data-list" v-if="addDialog">
      <el-row class="list-content">
        <el-col><span>{{$t('businessManager.handleAdd')}}</span></el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :offset="8" :span="5">
          <el-upload class="upload-demo" drag :action="urlUpload" :file-list="fileList"
          :auto-upload="false" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{$t('businessManager.click')}}
              <div class="el-upload__tip" slot="tip">{{$t('businessManager.support')}}.xlsx .xls .pdf ...</div>
            </div>
          </el-upload>
        </el-col>
      </el-row>
    </div>

    <div class="data-bnt" v-if="addDialog">
      <el-row>
        <el-col>
          <el-button class="yt-btn-ys" type="primary" @click="submitUpload">{{$t('button.submit')}}</el-button>
          <el-button class="yt-btn" type="primary" @click="cancel">{{$t('button.cancel')}}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  // 专案报价单维护
  import offerPrjReq from '@/api/offerPrj';
  import myOffeReq from '@/api/myOffe';

  export default {
    name: 'businessManager',
    data() {
      return {
        addDialog: false,
        id: '',
        title: '',
        tableKey: 0,
        listLoading: true,
        Info: {},
        list: [],
        fileList: [],
        urlUpload: '',
        routeQuery: {},
        offerOder: ''
      };
    },
    methods: {
      // 上传成功
      handleAvatarSuccess(res) {
        this.cancel();
        this.fileList = [];
        this.getList();
        console.log(res);
      },
      // 上传成功之前限制格式或大小
      beforeAvatarUpload(file) {
        const isType =
          file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          file.type === 'application/vnd.ms-excel' ||
          file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error(this.$t('businessManager.tips.message1'));
        }
        if (!isLt2M) {
          this.$message.error(this.$t('businessManager.tips.message2'));
        }
        return isType && isLt2M;
      },
      // 模板下载
      // 下载
      handleDownload(filePath, isType) {
        console.log('filePath', filePath);
        const a = document.createElement('a');
        let href = '';
        if (isType) {
          href = '/api/admin/excel/downloadTemplate?filePath=' + filePath;
        } else {
          const type = '0';
          href = '/api/admin/excel/downloadTemplate?filePath=' + filePath + '&type=' + type;
        }
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      // 新增报价
      handleAdd() {
        this.addDialog = true;
      },
      // 取消
      cancel() {
        this.addDialog = false;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      getProgress() {
        // 获取页面上半部分
        const progressListDetail = window.sessionStorage.getItem('progressListDetail');
        this.Info = JSON.parse(progressListDetail);
        console.log(this.Info)
      },
      getOfferOrder(id) {
        // 获取报价单号
        myOffeReq.getOfferOrder(id).then(res => {
          this.offerOder = res.data
        });
      },
      getList() {
        // 获取页面下半部分
        this.listLoading = true;
        console.log(this.demandId)
        this.Info.projectId = this.demandId
        offerPrjReq.page(this.Info).then(response => {
          this.list = response.data.rows;
          this.listLoading = false;
        });
      },
      getData() {
        myOffeReq.getOfferAndDemand(this.id).then(response => {
          this.Info = response.data.progress;
          this.list = response.data.offerPrjs;
          this.demandId = response.data.progress.id;
          const type = '0';
          this.urlUpload = '/api/admin/excel/uploadDemand/' + this.$store.getters.info.id + '/' + this.demandId + '/' + type;
          this.getOfferOrder(this.demandId)
        });
      }
    },
    created() {
      // 获取id
      if (this.$route.query.id === undefined) {
        const demandQuotationQuery = window.sessionStorage.getItem('businessManagerQuery');
        this.routeQuery = JSON.parse(demandQuotationQuery);
      } else {
        this.routeQuery = this.$route.query;
      }
      this.title = this.routeQuery.title;
      this.listLoading = false;
      if (this.title === 'update') {
        // 从工务进度跟踪维护页面进来
        this.demandId = this.routeQuery.id;
        this.id = this.routeQuery.id;
        const type = '0';
        this.urlUpload = '/api/admin/excel/uploadDemand/' + this.$store.getters.info.id + '/' + this.demandId + '/' + type;
        this.getProgress();
        this.getList();
        this.getOfferOrder(this.demandId)
        return;
      }
      if (this.title === 'myQuotes') {
        // 从我的报价进来
        this.id = this.routeQuery.id;
        this.getData();
        return;
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('businessManagerQuery', JSON.stringify(this.routeQuery));
    }
  };
</script>
<style scoped>
</style>
